<script setup>
import Progress from '../components/Progress/Progress.vue'
</script>

<template>
  <main>
    <h1>1.直接调用 <code>&lt;Progress /&gt;</code></h1>
    <Progress/>


    <h1 class="mt10">2. 数字输入, 参数60,是60% <p><code>&lt;Progress :num="60"/&gt; </code></p></h1>
    <Progress :num="60"/>


    <h1 class="mt10">3. 带2个参数,改变长度和颜色。<p><code>&lt;Progress :num="30" :color="'#41B883'"/&gt; </code></p> </h1>
    <Progress :num="30" :color="'#41B883'"/>


    <h1 class="mt10">4.百分比输入时不加:号 <p><code>&lt;Progress num="75%"/&gt; </code></p> </h1>
    <Progress num="75%" />             <!-- 百分比输入 -->


    <h1 class="mt10">5.分数输入时不加:号 <p><code>&lt;Progress num="3/4"/&gt; </code></p> </h1>
    <Progress num="3/4"/>            <!-- 分数输入 -->


    <h1 class="mt10">6.自定义颜色时不加:号 <p><code>&lt;Progress :num="80" color="blue"/&gt; </code></p> </h1>
    <Progress :num="80" color="blue"/> <!-- 自定义颜色 -->


    <h1 class="mt10">7.自定义高度 <p><code>&lt;Progress :num="40" :height="8"/&gt; </code></p> </h1>
    <Progress :num="40" :height="8"/>  <!-- 自定义高度 -->
  </main>
</template>
<style>
.mt10{
  margin-top: 10px;
}
</style>
